<template>
  <div>
    <h1>欢迎光临</h1>
    <h2>苹果10￥/斤,今天限时8折优惠</h2>
    <p>
      <span>请输入你要购买的数量</span>
      <input type="number" name="" id="" v-model="num" />
    </p>
    <button @click.prevent="pay">结账</button>
    <p>
      结账单：总价：{{ allPay }}￥元，折后价：{{ endPay }}￥元,省了{{
        savePay
      }}￥元
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      allPay: "0",
      endPay: "0",
      savePay: "0",
    };
  },

  methods: {
    pay() {
      this.allPay = this.num * 10;
      this.endPay = this.num * 8;
      this.savePay = this.num * 2;
    },
  },
};
</script>

<style>
</style>